<template>
  <a-modal
    title="上传"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @cancel="handleCancel"
  >
    <div class="self-box">
      <div class="self-box-item">
        <div @click="downTemplates" class="upload-dragger">
          <a-upload-dragger
            :headers="headers"
            :multiple="true"
            :openFileDialogOnClick="false"
            @change="handleChange"
            action="/api/product/downloadTemplate"
            name="file"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="cloud-download"/>
            </p>
            <p class="ant-upload-text">先下载要上传的模板</p>
            <p class="ant-upload-hint">
              支持扩展名：xls
            </p>
          </a-upload-dragger>
        </div>
      </div>
      <div class="self-box-item">
        <div
          class="upload-dragger"
        >
          <a-upload-dragger
            name="file"
            :multiple="true"
            action="/api/product/upload"
            @change="handleChange"
            :showUploadList="false"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="cloud-upload" />
            </p>
            <p class="ant-upload-text">上传要导入的文件</p>
            <p class="ant-upload-hint">
              支持扩展名: .xlsx
            </p>
          </a-upload-dragger>
        </div>
      </div>
    </div>
    <a-divider/>
    <div class="step-form-style-desc">
      <a-spin :spinning="confirmLoading">
        注意：<br>
        1.请选择Excel文件导入<br>
        2.红色字段为必填字段
      </a-spin>
    </div>
    <template slot="footer" >
      <a-button key="cancel" @click="handleCancel">取消</a-button>
    </template>
  </a-modal>

</template>

<script>
import ACol from 'ant-design-vue/es/grid/Col'
import ARow from 'ant-design-vue/es/grid/Row'
import { downloadModel } from '@api/boms/product'
export default {
  name: 'ProductUpload',
  components: { ARow, ACol },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      editable: false,
      addable: false,
      showable: false
    }
  },
  methods: {
    show () {
      this.visible = true
    },
    handleCancel () {
      this.visible = false
    },
    downTemplates () {
      console.log('down')
      downloadModel().then(res => {
        const blbo = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })
        var link = document.createElement('a')
        link.href = window.URL.createObjectURL(blbo)
        link.download = '产品导入模板.xlsx'
        link.click()
      }).catch((e) => {
        this.$message.warning('下载失败')
      })
    },
    handleChange (info) {
      this.confirmLoading = true
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        if (info.file.response.code === 0) {
          this.$message.success('导入成功！')
          this.visible = false
          this.confirmLoading = false
          this.$emit('ok')
        } else if (info.file.response.code === 1) {
          this.$message.error(info.file.response.msg)
        }
        this.queryPage()
      } else if (info.file.status === 'error') {
        this.$message.error('导入失败，请重试！')
      }
    }
  },
  created () {
  }
}
</script>

<style scoped>
  .self-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 70px;
  }

  .self-box-item {
    width: 360px;
    height: 140px;
  }

  .step-form-style-desc {
    padding: 0 56px;
    color: rgba(0, 0, 0, .45);
  }
</style>
